<script lang="ts" setup>
import { useDictOptions } from '@/hooks'

interface Props {
  status: string | number
}

const props = withDefaults(defineProps<Props>(), {
  status: 0,
})
const options = useDictOptions('PayTypeEnum')

const getLabel = () => {
  return options.filter(item => item.value === props.status)[0].label
}
</script>

<template>
  <div class="class-status status0">
    {{ getLabel() }}
  </div>
</template>

<style lang="less" scoped>
  .class-status {
  font-size: 14px;
  position: relative;
  padding-left: 12px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
}
.status0 {
  color: #165dff;

  &::before {
    background: #165dff;
  }
}
.status1 {
  color: #1d2129;

  &::before {
    background: #c9cdd4;
  }
}
.status2 {
  color: #f53f3f;

  &::before {
    background: #f53f3f;
  }
}
.status3 {
  color: #ff7d00;

  &::before {
    background: #ff7d00;
  }
}
</style>
